<template>
  <div class="container">
    <div id="carouselBanner" class="carousel slide mb-4" data-ride="carousel">
      <ol class="carousel-indicators">
        <template v-for="(value, index) in carousels">
          <li data-target="#carouselBanner" :data-slide-to="index" :class="{'active':index==0}"></li>
        </template>
      </ol>
      <div class="carousel-inner rounded-left-05 rounded-right-05 hidden">
        <template v-for="(value, key, index) in carousels">
          <div class="carousel-item" :class="{'active':index==0}">
            <a href="#">
              <img class="d-block w-100 item-img rounded-left-05 rounded-right-05" :src="value" :alt="index">
            </a>
          </div>
        </template>
      </div>
    </div>
    <panels>
      <div slot="content">
        <template v-for="(value, index) in panels1">
          <li class="col-3 p-0 d-inline-block activity-panel position-relative border" :class="{'rounded-left-05':index==0, 'rounded-right-05':index==3}">
            <img class="img-fluid w-100" :class="{'rounded-left-05':index==0, 'rounded-right-05':index==3}" :src="value" alt="">
            <a class="d-inline-block w-100 h-100 z-index-1 position-absolute left-0 top-0 activity-panel-border" :class="{'rounded-left-05':index==0, 'rounded-right-05':index==3}"
              href="#"></a>
          </li>
        </template>
      </div>
    </panels>
    <!-- hot-goods -->
    <forum>
      <div slot="title">热门商品</div>
      <div slot="header-right">
        <button class="bg-light fa fa-arrow-circle-left btn disabled" style="font-size: 25px;"></button>
        <button class="bg-light fa fa-arrow-circle-right btn ml-4" style="font-size: 25px;"></button>
      </div>
      <div slot="content">
        <template v-for="(value, index) in hotForum1">
          <li class="col-3 p-0 d-inline-block activity-panel position-relative float-left border-right text-center" :class="{'border-left':index==0}"
            style="height: 390px">
            <span class="position-absolute activity-panel-badge px-2 py-05 rounded-1" :class="value.badge[1]">{{value.badge[0]}}</span>
            <a href="#" class="position-absolute mt-5 mb-3 z-index-2 w-100 text-center left-0">
              <img style="width: 206px" class="item-img" :class="value.code" :src="getForumImg(value.childForum, value.forum, value)" alt="">
            </a>
            <div class="info position-absolute w-100" style="top: 16rem;">
              <h6>{{value.name}}</h6>
              <span class="commit" :class="value.code+'commit'" v-html="value.commit[0]"></span>
            </div>
            <ul class="colors p-0 my-1 w-100 position-absolute z-index-2" :class="value.code+'colors'" style="top: 19rem;">
              <template v-for="(val, index) in value.colors">
                <li class="d-inline-block" @mouseover="indexActive(value, val, index, value.childForum, value.forum)">
                  <div class="rounded-circle mx-1 colors-item" :class="{'active':index==0}">
                    <span class="rounded-circle d-block" :style="{background: val}"></span>
                  </div>
                </li>
              </template>
            </ul>
            <div class="mt-2 mb-3 w-100 monery-info position-absolute" style="top: 21rem;">
              <span class="monery d-inline">{{value.monery}}.00</span>
              <span v-if="value.oldmonery" class="oldmonery">{{value.oldmonery}}.00</span>
            </div>
            <div class="mt-2 mb-3 w-100 shopping-info z-index-2 mx-auto position-absolute" style="bottom: 0">
              <a class="see-detail btn btn-sm btn-light border">查看详情</a>
              <button type="button" v-if="value.sell && !soldout(value)" @click="addShopping(value)" class="add-shopping-cart btn btn-sm btn-primary text-white">加入购物车</button>
              <button type="button" v-if="soldout(value)" class="soldout btn btn-sm btn-secondary text-white" disabled>已售罄</button>
            </div>
            <a class="d-inline-block w-100 h-100 z-index-1 position-absolute left-0 top-0 activity-panel-border"></a>
          </li>
        </template>
      </div>
    </forum>
    <!-- gfjx -->
    <forum>
      <div slot="title">官方精选</div>
      <div slot="content">
        <li class="col-6 p-0 d-inline-block activity-panel position-relative float-left border-right text-center" style="height: 390px">
          <img class="position-absolute z-index-1 w-100 h-100 left-0" :src="getForumBigImg('forum', 'gfjx', 'jpg')" alt="">
          <a class="d-inline-block w-100 h-100 z-index-2 position-absolute left-0 top-0 activity-panel-border"></a>
        </li>
        <template v-for="(value, index) in forumData1">
          <li class="col-3 p-0 d-inline-block activity-panel position-relative float-left border-right border-bottom text-center" :class="{'border-left':index==0}"
            style="height: 390px">
            <span class="position-absolute activity-panel-badge px-2 py-05 rounded-1" :class="value.badge[1]">{{value.badge[0]}}</span>
            <a href="#" class="position-absolute mt-5 mb-3 z-index-2 w-100 text-center left-0">
              <img style="width: 206px" class="item-img" :class="value.code" :src="getForumImg(value.childForum, value.forum, value)" alt="">
            </a>
            <div class="info position-absolute w-100" style="top: 16rem;">
              <h6>{{value.name}}</h6>
              <span class="commit" :class="value.code+'commit'" v-html="value.commit[0]"></span>
            </div>
            <ul class="colors p-0 my-1 w-100 position-absolute z-index-2" :class="value.code+'colors'" style="top: 19rem;">
              <template v-for="(val, index) in value.colors">
                <li class="d-inline-block" @mouseover="indexActive(value, val, index, value.childForum, value.forum)">
                  <div class="rounded-circle mx-1 colors-item" :class="{'active':index==0}">
                    <span class="rounded-circle d-block" :style="{background: val}"></span>
                  </div>
                </li>
              </template>
            </ul>
            <div class="mt-2 mb-3 w-100 monery-info position-absolute" style="top: 21rem;">
              <span class="monery d-inline">{{value.monery}}.00</span>
              <span v-if="value.oldmonery" class="oldmonery">{{value.oldmonery}}.00</span>
            </div>
            <div class="mt-2 mb-3 w-100 shopping-info z-index-2 mx-auto position-absolute" style="bottom: 0">
              <a class="see-detail btn btn-sm btn-light border">查看详情</a>
              <button type="button" v-if="value.sell && !soldout(value)" @click="addShopping(value)" class="add-shopping-cart btn btn-sm btn-primary text-white">加入购物车</button>
              <button type="button" v-if="soldout(value)" class="soldout btn btn-sm btn-secondary text-white" disabled>已售罄</button>
            </div>
            <a class="d-inline-block w-100 h-100 z-index-1 position-absolute left-0 top-0 activity-panel-border"></a>
          </li>
        </template>
      </div>
    </forum>
    <!-- jhq -->
    <forum>
      <div slot="title">净化器及配件</div>
      <div slot="content">
        <li class="col-6 p-0 d-inline-block activity-panel position-relative float-left border-right text-center" style="height: 390px">
          <img class="position-absolute z-index-1 w-100 h-100 left-0" :src="getForumBigImg('forum', 'jhq', 'jpg')" alt="">
          <a class="d-inline-block w-100 h-100 z-index-2 position-absolute left-0 top-0 activity-panel-border"></a>
        </li>
        <template v-for="(value, index) in forumData1">
          <li class="col-3 p-0 d-inline-block activity-panel position-relative float-left border-right border-bottom text-center" :class="{'border-left':index==0}"
            style="height: 390px">
            <span class="position-absolute activity-panel-badge px-2 py-05 rounded-1" :class="value.badge[1]">{{value.badge[0]}}</span>
            <a href="#" class="position-absolute mt-5 mb-3 z-index-2 w-100 text-center left-0">
              <img style="width: 206px" class="item-img" :class="value.code" :src="getForumImg(value.childForum, value.forum, value)" alt="">
            </a>
            <div class="info position-absolute w-100" style="top: 16rem;">
              <h6>{{value.name}}</h6>
              <span class="commit" :class="value.code+'commit'" v-html="value.commit[0]"></span>
            </div>
            <ul class="colors p-0 my-1 w-100 position-absolute z-index-2" :class="value.code+'colors'" style="top: 19rem;">
              <template v-for="(val, index) in value.colors">
                <li class="d-inline-block" @mouseover="indexActive(value, val, index, value.childForum, value.forum)">
                  <div class="rounded-circle mx-1 colors-item" :class="{'active':index==0}">
                    <span class="rounded-circle d-block" :style="{background: val}"></span>
                  </div>
                </li>
              </template>
            </ul>
            <div class="mt-2 mb-3 w-100 monery-info position-absolute" style="top: 21rem;">
              <span class="monery d-inline">{{value.monery}}.00</span>
              <span v-if="value.oldmonery" class="oldmonery">{{value.oldmonery}}.00</span>
            </div>
            <div class="mt-2 mb-3 w-100 shopping-info z-index-2 mx-auto position-absolute" style="bottom: 0">
              <a class="see-detail btn btn-sm btn-light border">查看详情</a>
              <button type="button" v-if="value.sell && !soldout(value)" @click="addShopping(value)" class="add-shopping-cart btn btn-sm btn-primary text-white">加入购物车</button>
              <button type="button" v-if="soldout(value)" class="soldout btn btn-sm btn-secondary text-white" disabled>已售罄</button>
            </div>
            <a class="d-inline-block w-100 h-100 z-index-1 position-absolute left-0 top-0 activity-panel-border"></a>
          </li>
        </template>
      </div>
    </forum>
    <!-- ppzb -->
    <forum>
      <div slot="title">品牌周边</div>
      <div slot="content">
        <li class="col-6 p-0 d-inline-block activity-panel position-relative float-left border-right text-center" style="height: 390px">
          <img class="position-absolute z-index-1 w-100 h-100 left-0" :src="getForumBigImg('forum', 'ppzb', 'jpg')" alt="">
          <a class="d-inline-block w-100 h-100 z-index-2 position-absolute left-0 top-0 activity-panel-border"></a>
        </li>
        <template v-for="(value, index) in forumData1">
          <li class="col-3 p-0 d-inline-block activity-panel position-relative float-left border-right border-bottom text-center" :class="{'border-left':index==0}"
            style="height: 390px">
            <span class="position-absolute activity-panel-badge px-2 py-05 rounded-1" :class="value.badge[1]">{{value.badge[0]}}</span>
            <a href="#" class="position-absolute mt-5 mb-3 z-index-2 w-100 text-center left-0">
              <img style="width: 206px" class="item-img" :class="value.code" :src="getForumImg(value.childForum, value.forum, value)" alt="">
            </a>
            <div class="info position-absolute w-100" style="top: 16rem;">
              <h6>{{value.name}}</h6>
              <span class="commit" :class="value.code+'commit'" v-html="value.commit[0]"></span>
            </div>
            <ul class="colors p-0 my-1 w-100 position-absolute z-index-2" :class="value.code+'colors'" style="top: 19rem;">
              <template v-for="(val, index) in value.colors">
                <li class="d-inline-block" @mouseover="indexActive(value, val, index, value.childForum, value.forum)">
                  <div class="rounded-circle mx-1 colors-item" :class="{'active':index==0}">
                    <span class="rounded-circle d-block" :style="{background: val}"></span>
                  </div>
                </li>
              </template>
            </ul>
            <div class="mt-2 mb-3 w-100 monery-info position-absolute" style="top: 21rem;">
              <span class="monery d-inline">{{value.monery}}.00</span>
              <span v-if="value.oldmonery" class="oldmonery">{{value.oldmonery}}.00</span>
            </div>
            <div class="mt-2 mb-3 w-100 shopping-info z-index-2 mx-auto position-absolute" style="bottom: 0">
              <a class="see-detail btn btn-sm btn-light border">查看详情</a>
              <button type="button" v-if="value.sell && !soldout(value)" @click="addShopping(value)" class="add-shopping-cart btn btn-sm btn-primary text-white">加入购物车</button>
              <button type="button" v-if="soldout(value)" class="soldout btn btn-sm btn-secondary text-white" disabled>已售罄</button>
            </div>
            <a class="d-inline-block w-100 h-100 z-index-1 position-absolute left-0 top-0 activity-panel-border"></a>
          </li>
        </template>
      </div>
    </forum>
    <!-- panels-2 -->
    <panels>
      <div slot="content">
        <template v-for="(value, index) in panels1">
          <li class="col-3 p-0 d-inline-block activity-panel position-relative border" :class="{'rounded-left-05':index==0, 'rounded-right-05':index==3}">
            <img class="img-fluid w-100" :class="{'rounded-left-05':index==0, 'rounded-right-05':index==3}" :src="value" alt="">
            <a class="d-inline-block w-100 h-100 z-index-1 position-absolute left-0 top-0 activity-panel-border" :class="{'rounded-left-05':index==0, 'rounded-right-05':index==3}"
              href="#"></a>
          </li>
        </template>
      </div>
    </panels>
    <!-- Apps -->
    <forum>
      <div slot="title">锤子应用</div>
      <div slot="header-right">
        <button class="bg-light btn border" style="font-size: 14px;">全部应用 &gt;</button>
      </div>
      <div slot="content">
        <template v-for="(value, index) in forumApps">
          <li class="col-3 p-0 d-inline-block activity-panel position-relative float-left border-right text-center" :class="{'border-left':index==0}"
            style="height: 300px">
            <div class="apps-info">
							<a href="#" class="position-absolute mt-5 mb-3 w-100 text-center left-0">
								<div style="width: 90px; height: 100px;" class="item-img mx-auto" :style="{backgroundImage: 'url(' + getImg('apps', value.img.href, value.img.type) + ')', backgroundPosition: value.img.css}" alt=""></div>
							</a>
							<div class="info position-absolute w-100" style="top: 11rem;">
								<h6>{{value.name}}</h6>
								<p class="commit mt-3 d-block text-secondary px-4" v-html="value.info"></p>
							</div>
							<div class="text-secondary system-icon nav-separte position-absolute w-100" style="bottom: 30px;">
								<ul class="nav mx-auto d-block">
                  <li>
                    <i class="fa fa-android"></i>
                  </li>
                  <li>
                    <i class="fa fa-apple"></i>
                  </li>
                </ul>
							</div>
						</div>
            <div class="mt-2 mb-3 w-100 shopping-info z-index-2 mx-auto position-absolute" style="top: 0">
							<div class="content" v-html="value.content"></div>
							<img class="my-5" :src="getImg('apps', value.qrcode.href, value.qrcode.type)" alt="">
							<p v-if="value.qrcode.show">扫二维码下载{{value.name}}</p>
              <a class="text-info small" :href="value.href">进一步了解 {{value.name}} ></a>
            </div>
            <a class="d-inline-block w-100 h-100 z-index-1 position-absolute left-0 top-0 activity-panel-border"></a>
          </li>
        </template>
      </div>
    </forum>
    <!-- BSS -->
    <forum>
      <div slot="title">论坛精选</div>
      <div slot="header-right">
        <a class="bg-light btn border" style="font-size: 14px;">前往论坛 &gt;</a>
      </div>
      <div slot="content">
        <template v-for="(value, index) in forumBBS">
         <li class="col-3 p-0 d-inline-block activity-panel position-relative float-left border-right text-center" :class="{'border-left':index==0}"
            style="height: 300px">
            <div class="bbs-info text-left">
							<a href="#" class="position-absolute mt-3 mb-3 w-100 text-center left-0">
								<img style="width: 80%;" class="item-img mx-auto rounded" :src="getImg('bbs', value.img.href, value.img.type)" alt="">
							</a>
							<div class="info position-absolute w-100 mt-3" style="top: 11rem; padding: 0 30px;">
								<a href="javascirpt:;" class="text-dark"><h6>{{value.name}}</h6></a>
								<p class="commit mt-2 d-block text-secondary" v-html="value.info"></p>
							</div>
              <a class="text-info small position-absolute" :href="value.href" style="bottom: 10px; left: 30px;">阅读全文&gt;</a>
						</div>
            <a href="value.href" class="d-inline-block w-100 h-100 z-index-1 position-absolute left-0 top-0 activity-panel-border"></a>
          </li>
        </template>
      </div>
    </forum>
  </div>
</template>

<script>
  import $ from "jquery";
  import Forum from "./Forum";
  import Panels from "./Panels";
  export default {
    name: "Home",
    data() {
      return {
        carousels: {
          0: require("../assets/carousels/lb-jgpro.png"),
          1: require("../assets/carousels/lb-fbhgb2.png"),
          2: require("../assets/carousels/lb-jhq.png")
        },
        panels1: {
          0: require("../assets/panel-1/4901d0dfa3e97a2199ceae54d251bc1b.png"),
          1: require("../assets/panel-1/c3264f351efad5c9530e2ab9c560bf27.png"),
          2: require("../assets/panel-1/kouzhaohezhuangbaoyou.png"),
          3: require("../assets/panel-1/pinzhixiaobanner.jpg")
        },
        hotForum1: require("../assets/hot-goods/data.json"),
        forumData1: require("../assets/forum/gfjx/data.json"),
        forumApps: require("../assets/forum/apps/data.json"),
        forumBBS: require("../assets/forum/bbs/data.json"),
        shoppingInfo: false,
      }
    },
    methods: {
      getForumBigImg(childForum, forum, type) {
        return require(`../assets/${childForum}/${forum}/${forum}.${type}`)
      },
      getForumImg(childForum, forum, value, color, index) {
        return (
          !forum
          ? require(`../assets/${childForum}/${value.code}/${color || value.colors[0]}.${value.type[index] || value.type[0]}`)
          : require(`../assets/${childForum}/${forum}/${value.code}/${color ||　value.colors[0]}.${value.type[index] || value.type[0]}`)
        )
      },
      getImg(name, href, type) {
        return require(`../assets/forum/${name}/${href}.${type}`)
      },
      indexActive(value, color, index, childForum, forum) {
        $('.' + value.code).attr('src', this.getForumImg(childForum, forum, value, color, index));
        $('.' + value.code + 'colors').find('div').removeClass('active');
        $('.' + value.code + 'colors').find('div').eq(index).addClass('active');
        $('.' + value.code + 'commit').html(value.commit[index]);
      },
      soldout(value){
        return !value.pieces ? true : false;
      },
      addShopping(value){
        if (value.pieces) {
          this.shopping.push(value);
          value.pieces--;
        }
        if (this.shopping.length){
          $('.shopping-card').css('height', 'auto')
        }
      }
    },
    props: ['shopping'],
    computed: {},
    mounted() {
      window.addEventListener("scroll", this.watchScroll);
    },
    components: {
      'forum': Forum,
      'panels': Panels
    }
  };

</script>

<style>
  .container {
    max-width: 1220px !important;
    min-width: 1220px !important;
  }

  #carouselBanner .carousel-inner .item-img {
    margin-top: -25px;
    margin-bottom: -25px;
  }

  .activity-panel .activity-panel-border {
    box-shadow: 0 0 0 #eee inset;
    transition: all 0.15s ease-out;
  }

  .activity-panel:hover .activity-panel-border {
    box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
  }

  .activity-panel-badge {
    top: 20px;
    right: 15px;
    font-size: 12px;
  }

  .activity-panel .badgeGolden {
    color: #a06e37;
    background: #fffbdf;
    border: 1px solid #d5b480;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  }

  .activity-panel .badgePink {
    color: #d03b34;
    background: #ffe7e5;
    border: 1px solid #f3938b;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  }

  .activity-panel .info .commmit {
    color: #e04e4e;
    font-size: 12px;
  }

  .activity-panel .monery,
  .activity-panel .oldmonery {
    font-size: 18px;
    font-weight: 600;
  }

  .activity-panel .monery {
    color: #de4037;
  }

  .activity-panel .oldmonery {
    color: #d2d2d2;
    text-decoration: line-through;
    font-size: 13px;
  }

  .activity-panel .system-icon li {
    display: inline;
  }

  .activity-panel .system-icon i {
		color: #ccc;
  }

  .activity-panel .shopping-info .content .btn {
		margin: 10px 0;
  }
  .activity-panel .shopping-info .content .btn:first-of-type {
		margin-top: 80px;
  }

  .nav-separte li:after {
		content: '|';
		color: #ccc;
		padding: 0 10px;
  }

  .nav-separte li:last-of-type:after {
		content: '';
		padding: 0;
  }

  .activity-panel .monery::before,
  .activity-panel .oldmonery::before {
    content: "￥";
    font-weight: 600;
  }

  .rounded-left-05 {
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
  }

  .rounded-right-05 {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
  }

  .rounded-1 {
    border-radius: 1rem !important;
  }

  .z-index-1 {
    z-index: 1;
  }

  .z-index-2 {
    z-index: 2;
  }

  .z-index-3 {
    z-index: 3;
  }

  .left-0 {
    left: 0;
  }

  .top-0 {
    top: 0;
  }

  .py-05 {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  .shopping-card {
    cursor: pointer;
    width: 400px;
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    right: 0;
    z-index: 999;
  }
  .shopping-card .shopping-item {
    transition: all 0.5s;
  }
  .shopping-card .shopping-item:hover {
    background: #ccc;
  }
  .shopping-card .shopping-item .shopping-item-img {
    width: 90px;
  }
  .shopping-card .shopping-item .close-btn {
    color: #333;
    border-color: #333;
    font-size: 15px;
    padding: 0 2px 0 2px;
  }
  .shopping-card .shopping-item .close-btn:hover {
    background: #999;
    border-color: #333;
  }
</style>
